import {Layout, Spin} from "antd";
import React, {Suspense, useEffect} from "react";
import {Outlet, useNavigate, useLoaderData} from "react-router-dom";
import Menu from "./menu";
import "./index.less";

const {Sider, Content} = Layout;

const Home: React.FC = () => {
    const data: any = useLoaderData();
    const nav = useNavigate();
    useEffect(() => {
        const isLogin = localStorage.getItem("admin") || false;
        if (!isLogin) {
            nav("/", {replace: true});
        }
    }, [nav]);

    return (
        <Suspense fallback={<Spin style={{flex: 1}} />}>
            <Layout className="page-layout">
                <Sider className="sider-layout">
                    <Menu data={data} />
                </Sider>
                <Content className="content-layout">
                    <div className="content-wrapper">
                        <Suspense fallback={<Spin style={{flex: 1}} />}>
                            <Outlet />
                        </Suspense>
                    </div>
                </Content>
            </Layout>
        </Suspense>
    );
};

export default Home;
